<template>
    <div class="userdata">
        <head_>
            <h1>完善资料</h1>
        </head_>
        <van-form @submit="onSubmit" enctype="multipart/form-data">
            <van-uploader style="float: left;margin-left: 14px;margin-top: 15px;" v-model="fileList" accept="file">
                <van-button size="small" icon="plus" type="primary">上传头像</van-button>
            </van-uploader>
            <br>
            <br>
            <br>
            <br>
            <div>
                <van-button size="small" icon="plus" type="primary">确定上传</van-button>
            </div>
        </van-form>
        <br><br><br><br><br><br><br>
        <div class="inp">
            <label for="username">账号用户名</label>
            <input type="text" placeholder="请输入账号用户名" id="username" v-model="userdata.username"/>
        </div>
        <div class="inp">
            <label for="name">昵称</label>
            <input type="text" placeholder="请输入昵称" id="name" v-model="userdata.name"/>
        </div>
        <div class="inp">
            <label for="licenseNo">驾照号码</label>
            <input type="text" placeholder="驾照号码" id="licenseNo" v-model="userdata.licenseNo"/>
        </div>
        <div class="inp">
            <label>证件类型</label>
            <select name="idType" v-model="userdata.idType">
                <option value="1">居民身份证</option>
                <option value="2">护照</option>
                <option value="3">军官证</option>
            </select>
        </div>
        <div class="inp">
            <label for="idNumber">证件号码</label>
            <input type="text" placeholder="证件号码" id="idNumber" v-model="userdata.idNumber"/>
        </div>
        <div class="inp">
            <label for="email">邮箱</label>
            <input type="text" placeholder="邮箱" id="email" v-model="userdata.email"/>
        </div>
        <div class="submit">
            <button
                    @click="submit"
                    :disabled="submitdisplay"
                    :class="[submitcolor === true ? 'submit_active' : '']">提交
            </button>
        </div>
    </div>
</template>

<script>
    //导入请求
    import head_ from "../jingtai_/header";
    import {userdataFun} from "../../request/userinfo/userinfo";
    export default {
        props: {},
        data() {
            return {
                fileList:[],
                headerImage: '', picValue: '',
                userdata: {},
                idrepw: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/, //身份证
                of: /^[0-9]{8}$/, //军官证
                passport: /^[a-zA-Z0-9]{5,17}$/,
                licenseNorepw: /^[1-8]\d{11}$/, //驾照
                emailrepw: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                submitdisplay: true,
                submitcolor: false,
                regphone: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                regpw: /^\w{6,12}$/,
                bool: true,
                falseIdCard:''
            };
        },
        created() {
            console.log(this.$store.state.user);
            this.userdata = this.$store.state.user;
            if (this.$store.state.user.idNumber) {
                let idNumber = this.userdata.idNumber;
                this.falseIdCard =idNumber.substr(0, 5) + "******" + idNumber.substr(-3);
            }
        },
        methods: {
            async onSubmit () {
                //创建一个formData对象，将要传的文件添加到里面
                let formData = new window.FormData();
                console.log(this.fileList[0])
                if(this.fileList.length > 0) {
                    //展示遮罩层
                    this.show = true;
                        //将文件添加到fromData中
                        formData.append("file", this.fileList[0].file);
                        console.log(formData);
                        //将文件传给后台的接口，设置请求头的类型为"multipart/form-data",不然后台可能获取不到。
                        await this.$http.post('http://localhost:12188/ss/user/upload', formData, {
                            headers: { "Content-Type": "multipart/form-data",'myAuthorization':localStorage.getItem('token') }})
                            .then((response) =>{
                                console.log(response.data);
                                // 当请求成功
                                if (response.data.t !== ''&&response.data.t!==undefined) {
                                    //清空formData
                                    console.log('成功')
                                    this.userdata.headPic=response.data.t;
                                    console.log('新头像地址：'+response.data.t);
                                    formData.delete("file");
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            })
                            .then(function () {
                                // always executed
                            });
                    //刷新展示页面
                    //清空文件列表
                    /*setTimeout(() => {
                        //关闭遮罩层
                        this.show = false;
                        //弹出提示
                        Toast.success("上传成功");
                    }, 1000);*/
                }
            },
            eye_active() {
                this.flas = !this.flas;
            },
            eye_active2() {
                this.flas2 = !this.flas2;
            },
            // 表单验证
            submit() {
                if (this.licenseNorepw.test(this.userdata.licenseNo) === false) {
                    this.$toast.fail("请输入正确的驾照号");
                } else if (this.emailrepw.test(this.userdata.email) === false) {
                    this.$toast.fail("请输入正确的邮箱格式");
                } else {
                    console.log({
                        id: this.$store.state.user.id,
                        username: this.userdata.username,
                        name: this.userdata.name,
                        licenseNo: this.userdata.licenseNo,
                        idType: this.userdata.idType,
                        idCard: this.userdata.idNumber,
                        email: this.userdata.email,
                        headPic:this.userdata.headPic
                    })
                    userdataFun({
                        id: this.$store.state.user.id,
                        username: this.userdata.username,
                        name: this.userdata.name,
                        licenseNo: this.userdata.licenseNo,
                        idType: this.userdata.idType,
                        idCard: this.userdata.idNumber,
                        email: this.userdata.email,
                        headPic:this.userdata.headPic
                    }).then((res) => {
                        console.log(res);
                        if (res.resultCode === 2000) {
                            this.$toast.success({
                                message: "完善资料成功",
                                duration: 2000,
                                onClose: (res) => {
                                    return this.$router.push("/banner");
                                },
                            });
                        }
                    });
                }
            },
        },
        updated() {
            if (this.name !== "" && this.username !== "" && this.licenseNo !== "") {
                this.submitdisplay = false;
                this.submitcolor = true;
            } else {
                this.submitcolor = false;
                this.submitdisplay = true;
            }
        },
        components: {head_},
    };
</script>

<style scoped lang="less">
    .userdata {
        padding: 0 0.24rem;

        .title {
            display: flex;
            align-items: center;
            height: 0.88rem;
        }

        span {
            flex: 1;
            text-align: center;
            font-size: 0.34rem;
            font-weight: bolder;
        }

        .inp {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.29rem;
            position: relative;

            label {
                font-size: 0.26rem;
                font-weight: bolder;
            }

            input {
                width: 5.48rem;
                height: 0.66rem;
                font-size: 0.22rem;
                padding-left: 0.19rem;
                border: 2px solid #e4e4e4;
                border-radius: 0.04rem;

                &::placeholder {
                    color: #999;
                }
            }

            .van-icon-eye-o {
                position: absolute;
                top: 0.2rem;
                right: 0.19rem;
            }

            .eye_active {
                color: #2094ff;
            }
        }

        .submit {
            margin-top: 1.29rem;
            text-align: center;

            button {
                width: 3rem;
                height: 1rem;
                color: #999;
                background: #f2f2f2;
                font-size: 0.34rem;
                text-align: center;
                line-height: 1rem;
                border: none;
                outline: none;
            }

            .submit_active {
                background: #43a5ff;
                color: #fff;
            }
        }
    }
</style>
